<template>
  <form-drawer ref="formDrawerRef" title="分配检测站" @submit="handleSubmit">
    <el-form ref="formRef" :model="form" :rules="rules">
      <el-form-item label="检测站" prop="inspectionId">
        <el-select v-model="form.inspectionId" placeholder="请选择检测站" filterable>
          <el-option
            v-for="item in checkStation"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </form-drawer>
</template>
<script setup lang="ts">
import { toRefs, watch, ref, onMounted } from "vue";
import { useInitForm } from "@/hooks/useCommon";
import FormDrawer from "@/components/FormDrawer.vue";
import {toast} from "@/utils/index"
import { assignCheckStationApi, getCheckStationListApi } from "@/api/second";
const emits = defineEmits(["success"]);
const props = defineProps({
  record: {
    type: Object,
    default: () => ({})
  }
});
const { record } = toRefs(props);
const { formDrawerRef, formRef, form, rules, handleCreate, handleSubmit } = useInitForm({
  isNotTips:true,
  form: {
    recordId: "",
    inspectionId: ""
  },
  rules: {
    inspectionId: [{ required: true, message: "请选择检测站", trigger: "change" }]
  },
  createData: assignCheckStationApi,
  success: () => {
    toast('分配成功！')
    emits("success");
  }
});
// 获取检测站列表
const checkStation = ref<any[]>([]);
const handleGetCheckStationList = async () => {
  const res = await getCheckStationListApi({});
  const newItem = (res as any).map((item: any) => {
    return {
      label: item.inspectionStationName,
      value: item.id
    };
  });
  checkStation.value = newItem;
};
onMounted(() => {
  handleGetCheckStationList();
});
watch(
  () => record.value,
  (val) => {
    form.recordId = val.recordId;
    form.inspectionId = val.inspectionId;
  },
  {
    immediate: true
  }
);

defineExpose({
  handleCreate
});
</script>
<style scoped lang="scss"></style>
